<template>
    <div class="page-mobile-bind white-bg">
        <div class="main">
            <div class="list-item after-line normal-text">
                <span class="list-item-left">目前手机号：</span>
                <div class="list-item-content">
                    <input disabled v-model="userBasicInfo.mobile" class="list-input right block" placeholder="请输入收件人联系方式" />
                </div>
            </div>
            <div class="list-item after-line normal-text">
                <span class="list-item-left">修改后的手机号</span>
                <div class="list-item-content">
                    <input v-model="mobile" class="list-input right block" placeholder="请输入手机号" maxlength="11" type="number">
                </div>
            </div>
            <div class="list-item after-line normal-text">
                <span class="list-item-left code">输入手机短信验证码：</span>
                <div class="list-item-content dis-flex">
                    <input v-model="code" class="list-input text-center block" placeholder="验证码" maxlength="11" type="number">
                    <div @click="getCode" class="btn btn-code btn-mobile btn-small btn-block" :class="{ disabled: requesting }">获取验证码</div>
                </div>
            </div>
            <div class="btn-wrap">
                <div @click="submit" class="btn btn-mobile btn-white-red btn-large btn-block">
                    确认修改
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'MobileBind',
})
export default class MobileBind extends Vue {
    public mobile: any = '';
    public code: any = '';
    public serialNumber: any = '';
    public requesting: any = false;

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo!;
    }

    public async getCode() {
        if (!this.mobile || this.mobile.length !== 11) {
            wx.showToast({
                title: '手机号格式错误',
                icon: 'none',
            });
            return;
        }
        store.commit('utils/startRequest');
        const rdata = await store.dispatch('user/getMobileCode', {
            mobile: this.mobile,
        });
        store.commit('utils/endRequest');
        if (rdata.status === 0) {
            this.serialNumber = rdata.data;
            this.requesting = true;
        } else {
            wx.showToast({
                title: rdata.message,
                icon: 'none',
            });
        }
    }

    public async submit() {
        if (!this.serialNumber) {
            wx.showToast({
                title: '请获取验证码',
                icon: 'none',
            });
            return;
        }
        if (!this.code) {
            wx.showToast({
                title: '请输入验证码',
                icon: 'none',
            });
            return;
        }
        store.commit('utils/startRequest');
        const rdata = await store.dispatch('user/bindMobile', {
            serialNumber: this.serialNumber,
            code: this.code,
        });
        store.commit('utils/endRequest');
        if (rdata.status === 0) {
            await store.dispatch('getUserBasicInfo', true);
            wx.showToast({
                title: '修改成功',
            });
        }
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-mobile-bind {
    .main {
        .btn-wrap {
            padding: 30rpx 30rpx 10rpx;
        }
        .list-item {
            padding: 30rpx 40rpx;
            .list-item-left {
                line-height: 52rpx;
            }
        }
        .dis-flex {
            display: flex;
            align-items: center;
        }
        .list-item-left.code {
            margin-top: 8rpx;
            // line-height: 60rpx;
        }
        .btn-code {
            // width: 180rpx;
            line-height: 60rpx;
            color: #F35555;
            border: 1px solid #F35555;
            border-radius: 0;
            &.disabled {
                color: lighten(#F35555, 20%);
                border: 1px solid lighten(#F35555, 20%);
            }
        }
        .tag-item {
            margin: 4rpx 0 0 10rpx;
        }
    }
}

</style>
